/**
 * @desc 用户修改组件
 */
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Form, Space, Button, Input } from "antd";
import { phoneReg, passwordReg } from '@/utils/regexp'
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { apiEditStoreUserPassword } from "@/request/system/user";

const Item = Form.Item;

class UserUpdate extends Component {
    formRef = React.createRef()
    state = {
        loading: false,
        dataSource: null
    }

    async componentDidMount() {

    }

    /**
     * @desc 新增提交事件
     * @params object {value} 表单验证对象
     * */
    onFinish = async value => {
        this.setState({ loading: true })
        const response = await apiEditStoreUserPassword({ passwdMd: value.passwdMd })
        if (response.code === 0) {
            React.$message({
                type: 'success',
                content: '修改成功'
            })
            //关闭弹窗
            this.formRef.resetFields()
            this.props.updateSuccess()
        }
        this.setState({ loading: false })

    };

    /**
     * @desc 确认自定义密码验证
     * @params Reg {rule} 验证规则
     * @params string {value} 需要验证的字符串
     * @params fun {callback} 回调函数
     * */
    validatePassword = (rule, value, callback) => {
        const password = this.formRef.getFieldsValue(['passwdMd']).passwdMd;
        if (value !== password) {
            callback('确认两次输入的密码一致')
        }
        callback()
    }

    render() {
        const { handleCancel, roleList, storeList } = this.props;
        console.log(handleCancel, 'handleCancel');
        const { loading, dataSource } = this.state;
        return (
            <Form
                ref={(ref) => {
                    this.formRef = ref;
                }}
                labelCol={{ span: 6 }}
                onFinish={this.onFinish}
                wrapperCol={{ span: 16 }}
                initialValues={{ status: 'Y' }}
            >

                <Item name="passwdMd"
                    
                    rules={[{
                        pattern: /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{8,16}$/,
                        message: "密码应为字母，数字，特殊符号(~!@#$%^&*()_.)，两种及以上组合，8-16位字符串，如：abcd@1234"
                    }, {
                        required: true,
                        message: '请输入密码!',
                    },]}
                    label="密码">
                    <React.FormPassword placeholder={'请输入密码'} />
                </Item>
                <Item name="confirmPasswdMd"
                    required
                    rules={[{ validator: this.validatePassword }, {
                        required: true,
                        message: '请输入确认密码!',
                    },]}
                    label="确认密码">
                    <React.FormPassword placeholder={'请确认密码'} />
                </Item>
                <div className="p-text-align">
                    <Space size="large">
                        <Button key="back" onClick={() => handleCancel()}>
                            取 消
                        </Button>
                        <Button loading={loading} type="primary" htmlType="primary">
                            确 定
                        </Button>
                    </Space>
                </div>
            </Form>
        );
    }
}

UserUpdate.propTypes = {
    dialogType: PropTypes.string,
    handleCancel: PropTypes.func
};
UserUpdate.defaultProps = {};
const mapStateToProps = state => {
    return {
        user: state.user
    };
};
const mapDispatchToProps = dispatch => {
    return {};
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(UserUpdate));
